<template>
  <div class="userManager">
    <div class="toolBar">
      <el-select
        size="small"
        v-model="searchType"
        style="width: 130px"
        placeholder="请选择"
      >
        <el-option
          v-for="(item, index) in searchTypes"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        clearable
        style="width: 30%"
        @clear="getUserInfo"
        v-model="keyword"
        size="small"
        placeholder="输入查询条件"
      >
        <el-button @click="getUserInfo" slot="append" icon="el-icon-search"
          >查询</el-button
        >
      </el-input>
      <el-button
        size="small"
        type="warning"
        icon="el-icon-lock"
        style="margin-left: 10px"
        @click="lockedUsers('locked')"
        >锁定用户</el-button
      >
      <el-button
        size="small"
        icon="el-icon-unlock"
        type="success"
        @click="lockedUsers('unlocked')"
        >解锁用户</el-button
      >
      <el-button
        size="small"
        type="danger"
        @click="deleteUsers"
        icon="el-icon-delete"
        >删除用户</el-button
      >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-refresh"
        @click="refreshUser"
        >恢复用户</el-button
      >
    </div>
    <div class="content">
      <el-table
        size="small"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        :highlight-current-row="true"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          show-overflow-tooltip
          label="用户名"
        ></el-table-column>
        <el-table-column
          prop="enableMail"
          show-overflow-tooltip
          label="邮箱"
        ></el-table-column>
        <el-table-column
          prop="nickName"
          show-overflow-tooltip
          label="昵称"
        ></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == '0'"
              ><i class="fa fa-genderless"></i> 未知</span
            >
            <span v-if="scope.row.gender == 'm'"
              ><i style="color: #409eff" class="fa fa-mars"></i> 男</span
            >
            <span v-if="scope.row.gender == 'w'"
              ><i style="color: pink" class="fa fa-venus"></i> 女</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="phone" show-overflow-tooltip label="电话">
          <template slot-scope="scope">
            <i class="fa fa-phone"></i> {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column prop="job" label="工作" show-overflow-tooltip>
          <template slot-scope="scope">
            <i class="el-icon-suitcase"></i> {{ scope.row.job }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="生日">
          <template slot-scope="scope">
            <i class="el-icon-date"></i> {{ scope.row.birthday }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span style="color: red" v-if="scope.row.locked"
              ><i class="fa fa-lock"></i> 被锁定</span
            >
            <span v-if="!scope.row.enable"
              ><i class="fa fa-clock-o"></i> 未激活</span
            >
            <span
              style="color: green"
              v-if="scope.row.enable && !scope.row.locked"
              ><i class="fa fa-play"></i> 启用中</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="60">
          <template slot-scope="scope">
            <el-popover placement="right" width="100" trigger="click">
              <div
                @click="exeOption(scope.row.userId, item.value)"
                class="option"
                v-for="(item, index) in options"
                :key="index"
              >
                <i :class="item.icon"></i> {{ item.label }}
              </div>
              <el-link slot="reference" class="el-icon-more"></el-link>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="恢复用户" :visible.sync="showRefreshUser">
        <div class="toolBar">
          <el-button size="small" type="primary" @click="findBackUser"
            >恢复选中</el-button
          >
        </div>
        <el-table
          size="small"
          border
          :data="findBackUsers"
          height="300"
          @selection-change="handleSelectedByFindUsers"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="enableMail" label="注册邮箱"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="用户角色" :visible.sync="showRole">
        <div class="toolBar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="getAllRole"
            >新增角色</el-button
          >
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="delRole"
            >删除角色</el-button
          >
        </div>
        <div class="content">
          <el-table
            size="small"
            border
            :data="roleData"
            @selection-change="removeRoleSelect"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="role" label="角色名称"></el-table-column>
            <el-table-column prop="roleName" label="角色描述"></el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <el-dialog title="添加角色" width="20%" :visible.sync="showRoleList">
        <el-select size="small" v-model="addRoleId">
          <el-option
            v-for="(item, index) in roles"
            :key="index"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="addRole">添加</el-button>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import * as api from "@/js/api";
export default {
  name: "userManager",
  data() {
    return {
      searchTypes: [
        {
          label: "用户名",
          value: "username",
        },
        {
          label: "昵称",
          value: "nickName",
        },
        {
          label: "邮箱",
          value: "enableMail",
        },
      ],
      keyword: "",
      searchType: "username",
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      selectedUserIds: [],
      showRefreshUser: false,
      findBackUsers: [],
      options: [
        { label: "角色", value: "role", icon: "el-icon-view" },
        { label: "删除", value: "delete", icon: "el-icon-delete" },
        { label: "解锁", value: "unlock", icon: "el-icon-unlock" },
        { label: "锁定", value: "lock", icon: "el-icon-lock" },
      ],
      roleData: [],
      showRole: false,
      addRoleId: null,
      roles: [],
      showRoleList: false,
      tempUserId: "",
      tempRoleIds: [],
    };
  },
  methods: {
    removeRoleSelect(data) {
      this.tempRoleIds = [];
      data.forEach((element) => {
        this.tempRoleIds.push(element.id);
      });
    },
    delRole() {
      let param = {
        userId: this.tempUserId,
        roleIds: this.tempRoleIds,
      };
      api.delUserRole(param).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.showRole = false;
      });
    },
    addRole() {
      api
        .addUserRole({ userId: this.tempUserId, roleId: this.addRoleId })
        .then((res) => {
          this.$message({
            type: res.status ? "success" : "error",
            message: res.message,
          });
          this.showRoleList = false;
          this.showRole = false;
        });
    },
    exeOption(userId, type) {
      switch (type) {
        case "role":
          console.log("角色");
          this.getUserRoleList(userId);
          break;
        case "delete":
          console.log("删除");
          break;
        case "unlock":
          console.log("解锁");
          break;
        case "lock":
          console.log("锁定");
          break;
      }
    },
    getAllRole() {
      api.getRoleList().then((res) => {
        this.roles = res.data;
        this.showRoleList = true;
      });
    },
    getUserRoleList(userId) {
      this.tempUserId = userId;
      api.getUserRoleList({ userId: userId }).then((res) => {
        this.roleData = res.data;
        this.showRole = true;
      });
    },
    findBackUser() {
      api.findBackUsers(this.selectedUserIds).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.showRefreshUser = false;
        this.getUserInfo();
      });
    },
    refreshUser() {
      api.getExpireUserList().then((res) => {
        this.findBackUsers = res.data;
        this.showRefreshUser = true;
      });
    },
    lockedUsers(type) {
      if (type == "locked") {
        api.lockedUsers(this.selectedUserIds).then((res) => {
          this.$message({
            type: res.status ? "success" : "error",
            message: res.message,
          });
          this.getUserInfo();
        });
      } else {
        api.unLockedUsers(this.selectedUserIds).then((res) => {
          this.$message({
            type: res.status ? "success" : "error",
            message: res.message,
          });
          this.getUserInfo();
        });
      }
    },
    deleteUsers() {
      api.deleteUsers(this.selectedUserIds).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.getUserInfo();
      });
    },
    handleSelectionChange(data) {
      this.selectedUserIds = [];
      data.forEach((element) => {
        this.selectedUserIds.push(element.userId);
      });
      console.log(this.selectedUserIds);
    },
    handleSelectedByFindUsers(data) {
      this.selectedUserIds = [];
      data.forEach((element) => {
        this.selectedUserIds.push(element.id);
      });
      console.log(this.selectedUserIds);
    },
    getUserInfo() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.searchType == "username" ? this.keyword : "",
        nickName: this.searchType == "nickName" ? this.keyword : "",
        enableMail: this.searchType == "enableMail" ? this.keyword : "",
      };
      api.getUserInfoList(param).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
      });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>
<style scoped>
.userManager {
  padding: 10px;
}
</style>
<style>
.toolBar {
  text-align: left;
  border-bottom: 1px solid gray;
  padding-bottom: 5px;
}
.option {
  font-size: 11pt;
  cursor: pointer;
  padding: 5px;
}
.option:hover {
  background-color: #409eff;
  color: white;
}
</style>